<template>
  <div class="myapplication">
    <div class="mains_contain">
      <el-form :inline="true" size="small" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="searchForm.taskName" clearable placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="容器镜像">
          <el-input v-model="searchForm.appFileName" clearable placeholder="请输入容器镜像" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSearch" icon="el-icon-search" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="contant">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="taskName" label="任务名称" width="150" align="center">
            <!-- <template slot-scope="{ row }">
              <span style="color:#409EFF;cursor: pointer;" @click="toCheck(row)">{{ row.taskName  }}</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="appFileName" label="应用镜像" align="center"/>
          <el-table-column prop="statistics" label="状态数量" width="420" align="center">
            <template slot-scope="{ row }">
              <ul class="statusUl">
                <li>
                  <span style="background:#F56C6C"></span>
                  <span style="color:#F56C6C">失败</span>
                  <span>{{row.statistics && row.statistics.fail }}</span>
                </li>
                <li>
                  <span style="background:#409EFF"></span>
                  <span style="color:#409EFF">执行中</span>
                  <span>{{row.statistics && row.statistics.executing }}</span>
                </li>
                <li>
                  <span style="background:#67c23a"></span>
                  <span style="color:#67c23a">成功</span>
                  <span>{{ row.statistics&& row.statistics.success }}</span>
                </li>
              </ul>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="appFileSchema" label="操作系统架构" /> -->
          <el-table-column prop="appFileVersion" label="容器版本" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center" min-width="150">
            <template slot-scope="{ row }">
              {{ row.createTime |formatTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="150" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="toCheck(row)" icon="el-icon-view">查看详情</el-button>
              <el-button type="text" style="color: #f56c6c" size="mini" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" @close="cancle" :close-on-click-modal="false">
      <el-table :data="checkDataList" border stripe size="mini" highlight-current-row :max-height="maxHeight1" :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="appName" label="任务名称" />
        <el-table-column prop="deviceSn" label="设备标识" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="deviceModel" label="设备型号" />
        <!-- <el-table-column prop="name" label="在线状态" /> -->
        <el-table-column prop="deviceStatus" label="设备状态">
          <template slot-scope="scope">
            <span style="color: #67c23a" v-if="scope.row.deviceStatus == 'ONLINE'">在线</span>
            <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'OFFLINE'">离线</span>
            <span style="color: #f56c6c" v-if="scope.row.deviceStatus == 'WARNING'">告警</span>
            <span style="color: #e6a23c" v-if="scope.row.deviceStatus == 'INACTIVE'">未注册</span>
          </template>
        </el-table-column>
        <el-table-column prop="containerName" label="容器名称" />
        <!-- <el-table-column prop="fileName" label="安装名称" /> -->
        <el-table-column prop="containerIp" label="容器IP地址" />
        <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" width="120" />
        <el-table-column prop="containerStorageTotal" label="存储空间（MB）" width="120" />
        <el-table-column prop="containerIoPort" label="物理接口" width="180" />
        <el-table-column prop="executionNode" label="执行节点">
          <template slot-scope="scope">
            <span v-if="scope.row.executionNode=='AppStop'">停止</span>
            <span v-if="scope.row.executionNode=='AppUninstall'">卸载</span>
            <span v-if="scope.row.executionNode=='AppDownload'">下载</span>
            <span v-if="scope.row.executionNode=='AppInstall'">安装</span>
            <span v-if="scope.row.executionNode=='AppStart'">启动</span>
          </template>
        </el-table-column>
        <el-table-column prop="shellExcuteStatus" label="启动状态">
          <template slot-scope="scope">
            <span style="color:#409EFF" v-if="scope.row.shellExcuteStatus == '0'">执行中</span>
            <span style="color: #67c23a" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
            <span style="color: #F56C6C" v-if="scope.row.shellExcuteStatus == '2'">失败</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top:20px">
        <el-button type="primary" size="small" @click="dialogVisible=false">关闭</el-button>
        <el-button size="small" @click="dialogVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/sys/role";
import { appPageTask, appTaskId } from "@/api/application"


export default {
  comments: {},
  props: {},
  data() {
    return {
      forms: {},
      searchForm: {},
      title: "升级详情",
      dialogVisible: false,
      form: {},
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      maxHeight1: 400,
      checkDataList: [],
      taskName: ''
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    }
  },
  created() {

  },
  mounted() {
    this.getList()
  },
  methods: {
    getListDetail(id) {
      appTaskId({ taskId: id }).then(res => {

        this.checkDataList = res.data.appList
        this.checkDataList.forEach(item => {
          item.appName = this.taskName
        })

      })
    },
    toCheck(row) {

      let status = ''
      switch (row.taskStatus) {
        case 'stop':
          status = 'AppStop'
          break;
        case 'uninstall':
          status = 'AppUninstall'
          break;
        case 'download':
          status = 'AppDownload'
          break;
        case 'install':
          status = 'AppInstall'
          break;
        case 'start':
          status = 'AppStart'
          break;
        default:
          break;
      }
      this.$router.push({ path: "/applicationDeployment", query: { taskId: row.id, commandType: status } });
    },
    getList() {
      let data = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        appFileName: this.searchForm.appFileName,
        taskName: this.searchForm.taskName
      }
      appPageTask(data).then(res => {

        this.tableData = res.data.records
        this.pagination.total = res.data.total
      })
    },
    handleDeleteUser(row) {

    },
    handlerUser(row) {

      this.dialogVisible = true
      this.taskName = row.taskName
      this.getListDetail(row.id)
    },
    cancle() {
      this.dialogVisible = false;
      this.form = {}
    },
    // 查询
    handlerSearch() {
      this.getList()
    },
    // 复选框事件
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    getPageList() {
      this.getList();
    },
    userList() {

    },

  },
};
</script>

<style lang="scss">
.myapplication {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .statusUl {
    display: flex;
    align-items: center;
    li {
      width: 150px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      span:first-child {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        display: inline-block;
        margin-right: 10px;
        // background: red;
      }
      span {
        line-height: 14px;
      }
    }
  }
}
</style>
